<template>
  <div class="home-product-recommend">
    <item-title title="推荐商家" more-text="" more-url="" v-if="true" />
    <ul class="list">
      <li v-for="(item, index) in list" :key="index" class="list-item" @click="handleClick(item)">
        <div class="image" v-if="item.image && item.image.image">
          <!--<img v-lazy="item.descImage[0].image.path" v-if="item.descImage && item.descImage[0] && item.descImage[0].image" />-->
          <img v-lazy="item.image.image.path" />
        </div>
        <div class="desc" v-if="false">
          <p class="title">{{ item.name }}</p>
          <p class="text">{{ item.desc }}</p>
          <p class="button" v-if="false">查看商品</p>
        </div>
      </li>
    </ul>
    <div v-if="false" class="more" @click="$router.push('/merchant')">点击查看更多商家...</div>
  </div>
</template>

<script>
import ItemTitle from './_ItemTitle'
export default {
  name: 'HomeProductRecommend',
  props: ['list'],
  components: {
    ItemTitle
  },
  data() {
    return {
    }
  },
  methods: {
    handleClick(item) {
      // this.$router.push(`/product/merchant-product/${item.id}`)
      this.$router.push(`/service/merchant-list/${item.id}`)
    }
  }
}
</script>

<style scoped lang="stylus">
.home-product-recommend
  margin 0 10px
  //background red
  .list
    //display flex
    //flex-wrap wrap
    //justify-content space-between
    .list-item
      //width calc(50% - 25px)
      display flex
      background white
      margin 5px 0
      border-radius 5px
      //padding 10px
      .image
        //width 120px
        //height 120px
        width 100%
        //max-height 150px
        //overflow hidden
        //padding 5px
        //background red
        img {
          display block
          margin auto
        }
      .desc
        //flex 1
        flex 0
        text-align left
        position relative
        margin-top 10px
        .title
          line-height 20px
          font-weight 700
          font-size 14px
        &.text {
          font-weight normal
          color #666666
        }
        .price_old, .price
          //height 25px
          line-height 18px
        .price
          //color $second_color
          color red
          font-weight 700
          font-size 16px
          height 40px
          line-height 40px
        .price_old
          color #808080
          //text-decoration line-through
        .button
          position absolute
          background $main_color
          color white
          padding 7.5px 15px
          right 0
          bottom 0
          border-radius 15px
          letter-spacing 1.2px
          font-weight 500
  .more
    margin 10px 0
    background white
    height 35px
    line-height 35px
    border-radius 10px
    letter-spacing 1px
</style>
